﻿@{
    ViewData["Title"] = "新增用户";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 用户名</label>
        <div class="layui-input-block">
            <input type="text" id="user_name" name="user_name" maxlength="50" lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 角色</label>
        <div class="layui-input-block">
            <select id="role_id" name="role_id" lay-verify="required">
                <option value="">选择角色</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 密码</label>
        <div class="layui-input-block">
            <input type="password" id="user_password" name="user_password" maxlength="50" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 昵称</label>
        <div class="layui-input-block">
            <input type="text" id="nick_name" name="nick_name" maxlength="50" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <select id="gender_id" name="gender_id">
                <option value="">选择性别</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="tel" id="mobile_phone" name="mobile_phone" maxlength="11" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-block">
            <input type="text" id="user_job" name="user_job" maxlength="20" placeholder="请输入职位" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Email</label>
        <div class="layui-input-block">
            <input type="email" id="user_email" name="user_email" maxlength="50" placeholder="请输入Email" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">限制IP</label>
        <div class="layui-input-block">
            <input type="text" id="limit_ip" name="limit_ip" maxlength="50" placeholder="请输入限制IP段登录" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-verify="required" lay-filter="switch_user_status" name="switch_user_status" lay-skin="switch" lay-text="启用|禁用" checked>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" id="country_code" name="country_code" value="+86" />
        <input type="hidden" id="user_avatar" name="user_avatar" value="" />
        <input type="hidden" id="created_at" name="created_at" value="@DateTime.Now.ToString()" />
        <input type="hidden" id="user_status" name="user_status" value="true" />
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>

</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/'
    }).extend({
        index: '/lib/index'
    }).use(['index', 'laydate', 'form','element'], function () {
        var $ = layui.$
            , form = layui.form
            , admin = layui.admin
            , layedit = layui.layedit
            , element = layui.element
            , laydate = layui.laydate;

        // 监听指定开关
        form.on('switch(switch_user_status)', function (data) {
            if (this.checked) {
                $("#user_status").val(true);
            } else {
                $("#user_status").val(false);
            }
        });

        // 默认加载
        $(function () {
            loading = layer.load(2, {
                shade: [0.2, '#000']
            });

            // 性别
            admin.req({
                url: '/genders/select'
                , done: function (res_genderid) {
                    layer.close(loading);
                    $.each(res_genderid.data, function (i, item) {
                        $("#gender_id").append("<option value=\"" + res_genderid.data[i].gender_id + "\">" + res_genderid.data[i].gender_name + "</option>");
                    });
                    layui.form.render('select');
                }
            });

            // 角色
            admin.req({
                url: '/userroles/select'
                , done: function (res) {
                    layer.close(loading);
                    $.each(res.data, function (i, item) {
                        $("#role_id").append("<option value=\"" + res.data[i].role_id + "\">" + res.data[i].role_name + "</option>");
                    });
                    layui.form.render('select');
                }
            });
        });

        // 验证表单
        form.verify({
            username: function (value) {
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
                if (value.length<4) {
                    return '用户名长度不能小于4字符';
                }
                if (value.length>30) {
                    return '用户名长度不能大于30字符';
                }
            },
            pass: [/^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)(?=.*[\W].*))[\W0-9A-Za-z]{6,30}$/, '密码必须6到30位、包含字母、数字和符号，且不能出现空格']

        });

        // 监听提交
        form.on('submit(layuiadmin-app-form-submit)', function (data) {
            var field = data.field;
            var index = parent.layer.getFrameIndex(window.name);
            loading = layer.load(2, {
                shade: [0.2, '#000']
            });

            // 提交数据
            admin.req({
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                method: 'POST',
                url: '/users/create'
                , data: data.field
                , done: function (res) {
                    // console.log(`res=${JSON.stringify(res)}`);
                    layer.close(loading);
                    parent.layui.table.reload('LAY-app-content-list'); //重载表格
                    layer.msg(res.msg, {
                        offset: '15px'
                        , icon: 1
                        , time: 2000
                    }, function () {
                        parent.layer.close(index); //再执行关闭
                    });
                }
            });
        });
    })
</script>
